<template>
  <div class="detail">
    <div class="header">
      <div class="logo">
        <img src="../../assets/img/home/logo.png" alt="">
      </div>
    </div>

    <div class="detail-container">
      <div class="img-box">
        <img src="../../assets/img/home/detail_banner.png" alt="">
      </div>
      <div class="text-box">
        <h2 class="title">万福精瘦肉</h2>
        <h3 class="desc">精瘦肉好吃不贵大酬宾</h3>
        <p class="unit"><b>单位：</b>斤</p>
        <p class="price"><b>价格：</b>8.8元</p>
        <p class="content"><b>详情介绍：</b><br/>便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜便宜</p>
      </div>
      <div class="to-buy_btn">
        <x-button type="primary" link="/order" text="去购买"></x-button>
      </div>
    </div>

  </div>
</template>

<script>
  import { getDetails } from '@/api/details'
  import { XButton } from 'vux'
  export default {
    name: 'name',
    components: {
      XButton
    },
    data () {
      return {
        product: {}
      }
    },
    created () {
      var id = this.$route.params.id
      getDetails(id).then(res => {
        console.log(res)
      })
    }
  }
</script>

<style lang="less" scoped>
  .detail {
    .header {
      height: auto;
      background-image: url('../../assets/img/home/header-bg_02.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      .logo {
        margin-left: 15px;
        padding-top: 10px;
        padding-bottom: 15px;
      }
    }
    .detail-container {
      .img-box {
        img {
          width: 100%;
        }
      }
      .text-box {
        font-family: '微软雅黑';
        box-sizing: border-box;
        padding: 10px 15px;
        h2.title {
          font-size: 28px;
          font-weight: 600;
          margin-bottom: 5px;
          letter-spacing: 3px;
        }
        h3.desc {
          font-size: 18px;
          margin-bottom: 10px;
          border-bottom: 1px solid #ccc;
          padding-bottom: 10px;
        }
        .price {
          margin-bottom: 10px;
          font-size: 16px;
          border-bottom: 1px solid #ccc;
          padding-bottom: 10px;
        }
        .unit,.content {
          font-size: 16px;
        }
      }
      .to-buy_btn {
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        padding: 0px 10px 10px;
        position: fixed;
        bottom: 0;
        left: 0;
      }
    }
  }

</style>

